<template>
  <div class="home">
    <HelloWorld3/>
    <!-- main -->
    <div class="main">
      <div class="main_left">
        <!-- 国内机票 -->
        <h1>
          <img src="../assets/fly.png" alt="">国内机票
        </h1>
        <!-- 信息盒子 -->
        <div class="main_left_top">
          <div class="main_left_top1">
            <div class="main_hz">
              <p><span @click="show1" class="color" :class="yes1==true?'active':''"></span>单程</p>
              <p><span  @click="show2" class="color" :class="yes2==true?'active':''"></span>往返</p>
            </div>
            <!-- 单程 -->
            <div class="main_left_main" v-show="yes1">
              <p>出发城市 <input type="text" placeholder="中文/拼音/简拼"></p>
              <p>出发城市 <input type="text" placeholder="中文/拼音/简拼"></p>
              <p>出发城市 <input type="text" placeholder="中文/拼音/简拼"></p>
              <p>出发城市 <input type="text" placeholder="中文/拼音/简拼"></p>
            </div>
            <!-- 往返 -->
            <div class="main_left_main" v-show="yes2"> 
              <p>出发城市 <input type="text" placeholder="中文/拼音/简拼"></p>
              <p>到达城市 <input type="text" placeholder="中文/拼音/简拼"></p>
              <p>出发日期 <input type="text" placeholder="2022-9-14"></p>
              <p>返回日期 <input type="text" placeholder="2022-9-17"></p>
            </div>
            <div class="main_left_check">
              <input type="radio"> 携带儿童（2-8岁）<img src="../assets/warn.png" alt="">
            </div>
            <div class="main_left_search"><button type="search">搜索</button></div>
          </div>
        </div>
        <!-- 信息盒子结束 -->
        <!-- 特价机票 -->
        <div class="main_left_bottom">
          <h1>
            <img src="../assets/fly.png" alt="">特价机票
          </h1>
          <div class="main_left_bottom_main">
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
            <div class="main_left_bottom_main1"><p>上海——北京</p><p>特价</p><p>￥990</p></div>
          </div>
        </div>
      </div>
      <!-- 左边大盒子结束 -->
      <!-- 右边start -->
      <div class="main_right">
        <h2>国内低价游</h2>
        <div class="main_rightbig">
          <!-- 111 -->
          <div class="main_right1">
            <div class="main_right1_left"><img src="../assets/7.jpg" alt=""></div>
            <div class="main_right1_right">
              <h1>北京</h1>
              <div class="beijing">滚滚红尘帝王都,悠悠岁月百姓城1</div>
              <div class="main_right1_right_bottom"><p>￥990</p> <p><span>优惠卷</span> <span>1.9折</span></p></div>
            </div>
          </div>
          <!-- 222 -->
          <div class="main_right1">
            <div class="main_right1_left"><img src="../assets/7.jpg" alt=""></div>
            <div class="main_right1_right">
              <h1>北京</h1>
              <div class="beijing">滚滚红尘帝王都,悠悠岁月百姓城</div>
              <div class="main_right1_right_bottom"><p>￥990</p> <p><span>优惠卷</span> <span>1.9折</span></p></div>
            </div>
          </div>
          <!-- 333 -->
          <div class="main_right1">
            <div class="main_right1_left"><img src="../assets/7.jpg" alt=""></div>
            <div class="main_right1_right">
              <h1>北京</h1>
              <div class="beijing">滚滚红尘帝王都,悠悠岁月百姓城</div>
              <div class="main_right1_right_bottom"><p>￥990</p> <p><span>优惠卷</span> <span>1.9折</span></p></div>
            </div>
          </div>
          <!-- 444 -->
          <div class="main_right1">
            <div class="main_right1_left"><img src="../assets/7.jpg" alt=""></div>
            <div class="main_right1_right">
              <h1>北京</h1>
              <div class="beijing">滚滚红尘帝王都,悠悠岁月百姓城</div>
              <div class="main_right1_right_bottom"><p>￥990</p> <p><span>优惠卷</span> <span>1.9折</span></p></div>
            </div>
          </div>
          <!-- 555 -->
          <div class="main_right1">
            <div class="main_right1_left"><img src="../assets/7.jpg" alt=""></div>
            <div class="main_right1_right">
              <h1>北京</h1>
              <div class="beijing">滚滚红尘帝王都,悠悠岁月百姓城</div>
              <div class="main_right1_right_bottom"><p>￥990</p> <p><span>优惠卷</span> <span>1.9折</span></p></div>
            </div>
          </div>
          <div class="more"><button>加载更多</button></div>
        </div>
      </div>
    </div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
  data(){
    return{
      yes1:true,
      yes2:false
    }
  },
  methods:{
    show1:function(){
      this.yes1=true
      this.yes2=false
    },
    show2:function(){
      this.yes1=false
      this.yes2=true
      
    }}
   
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.main{width: 80%;margin: 20px 10% 100px 10%;display: flex;flex-direction: row;justify-content: space-between;}
.main_left{width: 48%;}
.main_left{h1{font-size: 25px;font-weight: normal;display: flex;margin: 20px 0;}img{width: 40px;display: block;}}
.main_left_top{width: 100%;border: 3px solid #5199d2;box-sizing: border-box;}
.main_hz{display: flex;flex-direction: row;width:40%;margin:30px auto;justify-content:space-between;line-height:36px;
p{display: flex;flex-direction: row;font-size: 25px;margin: 0% 5px;}
  span{display:block;width:30px;height:30px;border-radius:50%;margin:0 5px;
}}
.color{border: 3px solid black;}
.active{border: #5199d2 3px solid;}
.main_left_main{p{margin: 20px 0;font-size: 18px;input{font-size: 20px;padding: 10px;margin-left: 20px;outline:none}}width: 70%;margin: 20px auto;}
.main_left_check{text-align: center;margin: 0px 0;display: flex;flex-direction: row;img{width: 15px;height: 15px;display: block;margin-top: 7.5px;}input{display: block;margin: 7.5px 3px;outline:none}line-height: 30px;margin: 0 auto;width: 30%;}
.main_left_search{margin: 20px auto;button{padding: 10px 70px;background-color: #5199d2;border: 0;font-size: 16px;color:white;background-image: url(../assets/search2.png);background-position: 75% center;background-size: 25px;background-repeat: no-repeat;}text-align: center;}
.main_left_bottom_main{width: 100%;border: 1px solid gainsboro;border-radius: 10px;}
.main_left_bottom_main1{display: flex;flex-direction: row;justify-content: space-around;font-size:23px;line-height:60px;border-bottom: 1px solid gainsboro;p:last-child{color: orange;}}
.main_left_bottom_main1:first-child{p:last-child{font-size: 24px;}}
.main_left_bottom_main1{p:last-child{font-size: 30px;}}
.main_right{width: 50%;}
.main_right{h2{font-size: 25px;font-weight: normal;margin:20px 10px;};h1{font-size: 25px;font-weight: normal;margin:20px 10px;}}
.main_rightbig{width: 100%; box-shadow: 0px 0px 10px 5px rgb(242, 242, 242)}
.main_right1{width: 100%;display: flex;flex-direction: row;border-bottom: 1px solid rgb(169, 168, 168);padding: 4px 0;align-items: center;}
.main_right1_left{width: calc(40% - 6%);padding: 3%;}
.main_right1_left img{width: 100%;border-radius: 10px;}
.main_right1_right{width: 60%;height: 210px;}
.main_right1_right_bottom{display: flex;flex-direction: row;justify-content: space-between;color: orange;span{border: 1px solid orange;padding:5px 10px;border-radius: 5px;}p:first-child{border: 0;font-size: 27px;}width: 90%;margin: 0 auto;}
.beijing{margin:20px 0 60px 4%;color: gray;}
.main_right1:last-child{border: 0;}
.more{button{width: 90%;background-color: #fff5e5;text-align: center;font-size: 20px;padding: 10px 0;margin:10px 5% 10px 5%;border: 0;border-radius: 5px;}}
@media screen and (max-width:1200px){
  .main{flex-wrap: wrap;}
  .main_left{width: 100%;margin: 0 auto;}
  .main_right{width: 100%;}
  .main_right{h2{margin:50px auto;width: 150px;}}
  .main_right1_right_bottom{p:first-child{border: 0;font-size:20px;}}
  .main_hz{width:60%;}
  .main_left_main{p{margin: 20px 0;font-size: 18px;input{font-size: 20px;padding: 10px;margin-left: 20px;width: 60%;}};width: 90%;margin: 0 auto;}
}
</style>